<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="../dev/vendors/vue.js"></script>
  <div id="app">
    <h1>我是父组件的标题</h1>
    <my-component></my-component>
  </div>
  <script>
    // child
    Vue.component('my-component', {
      template: '<div>\
        <h2>我是子组件的标题</h2>\
        <slot>\
          只有在没有要分发的内容时才会显示。\
        </slot>\
      </div>'
    })
    //app
    var vm = new Vue({
      el: '#app'
    })
  </script>

  <div id="app2">
    <app-layout inline-template>
      <h1 slot="header">这里可能是一个页面标题</h1>
      <h1 slot="header">这里可能是一个页面标题2</h1>
      <p>主要内容的一个段落。</p>
      <p>另一个主要段落。</p>
      <p slot="footer">这里有一些联系信息</p>
    </app-layout>
  </div>
  <script>
    Vue.component('app-layout', {
      template: '<div class="container">\
        <header>\
          <slot name="header"></slot>\
        </header>\
        <main>\
          <slot></slot>\
        </main>\
        <footer>\
          <slot name="footer"></slot>\
        </footer>\
      </div>'
    })
    //app
    var vm2 = new Vue({
      el: '#app2'
    })
  </script>

  <div id="app3">
    <div class="parent">
      <child>
        <template scope="props">
          <span>hello from parent</span>
          <span>{{ props.text }}</span>
        </template>
      </child>
    </div>
  </div>
  <script>
    Vue.component('child', {
      template: '<div class="child">\
        <slot text="hello from child"></slot>\
      </div>'
    })
    var vm3 = new Vue({
      el: '#app3'
    })
  </script>
</body>
</html>